<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>任务列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" type="image/png" href="${ctx!}${siteIcoImg}">
    <link href="${ctx!}/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/admin/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/admin/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/admin/css/style.css?v=4.1.0" rel="stylesheet">


</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>任务列表</h5>
                    </div>
                    <div class="ibox-content">
                        <p>
                      		<button class="btn btn-success " type="button" onclick="add();"><i class="fa fa-plus"></i>&nbsp;添加</button>
                        </p>
                        <hr>
                        <div class="row row-lg">
		                    <div class="col-sm-12">
		                        <!-- Example Card View -->
		                        <div class="example-wrap">
		                            <div class="example">
		                            	<table id="table_list"></table>
		                            </div>
		                        </div>
		                        <!-- End Example Card View -->
		                    </div>
	                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="${ctx!}/admin/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx!}/admin/js/bootstrap.min.js?v=3.3.6"></script>
    
	<!-- Bootstrap table -->
    <script src="${ctx!}/admin/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${ctx!}/admin/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctx!}/admin/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <!-- Peity -->
    <script src="${ctx!}/admin/js/plugins/peity/jquery.peity.min.js"></script>

    <script src="${ctx!}/admin/js/plugins/layer/layer.min.js"></script>

    <!-- 自定义js -->
    <script src="${ctx!}/admin/js/content.js?v=1.0.0"></script>
    
    <script src="${ctx!}/admin/js/plugins/artTemplate/template.js"></script>
    
    <script id="operateHtml" type="text/html">
    		<button class="btn btn-primary btn-xs" type="button" onclick="edit('{{row.id}}')">
    			<i class="fa fa-edit"></i>&nbsp;修改
    		</button> &nbsp;
        	<button class="btn btn-danger btn-xs" type="button" onclick="del('{{row.jobName}}','{{row.jobGroup}}')">
        		<i class="fa fa-remove"></i>&nbsp;删除
        	</button> &nbsp;
    </script>

    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function () {
        	//初始化表格,动态从服务器加载数据  
			$("#table_list").bootstrapTable({
			    //使用get请求到服务器获取数据  
			    method: "POST",
			    //必须设置，不然request.getParameter获取不到请求参数
			    contentType: "application/x-www-form-urlencoded",
			    //获取数据的Servlet地址  
			    url: "${ctx!}/admin/task/list",
			    //表格显示条纹  
			    striped: true,
			    //启动分页  
			    pagination: true,
			    //每页显示的记录数  
			    pageSize: 10,
			    //当前第几页  
			    pageNumber: 1,
			    //记录数可选列表  
			    pageList: [5, 10, 15, 20, 25],
			    //是否启用查询  
			    search: true,
			    //是否启用详细信息视图
			    detailView:true,
			    detailFormatter:detailFormatter,
			    //表示服务端请求  
			    sidePagination: "server",
			    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
			    //设置为limit可以获取limit, offset, search, sort, order  
			    queryParamsType: "undefined",
			    //json数据解析
			    responseHandler: function(res) {
			        return {
			            "rows": res.rows,
			            "total": res.total
			        };
			    },
			    //数据列
			    columns: [{
			        title: "任务名称",
			        field: "jobName"
			    },{
			        title: "任务分组",
			        field: "jobGroup"
			    },{
			        title: "任务描述",
			        field: "jobDescription"
			    },{
			        title: "任务状态",
			        field: "jobStatus"
			    },{
			        title: "表达式",
			        field: "cronExpression"
			    },{
			        title: "创建时间",
			        field: "createTime"
			    },{
			        title: "Opr",
			        sortable: true,
			        field: "empty",
                    formatter: function (value, row, index) {
                        var val = '';
                        if(row.jobStatus == 'NORMAL') {
                            val = '<a href="javascript:void(0)" class="btn btn-success btn-xs" onclick="pauseTaskInfo(&quot;' + row.jobName +'&quot;,&quot;' + row.jobGroup + '&quot;)">' +
									'<i class="fa fa-square-o">暂停</a>'
                        }else if(row.jobStatus == 'PAUSED'){
                            val = '<a href="javascript:void(0)" class="btn btn-success btn-xs" onclick="resumeTaskInfo(&quot;' + row.jobName +'&quot;,&quot;' + row.jobGroup + '&quot;)">' +
									'<i class="fa fa-hourglass-start"></i>开始</a>'
                        }
                        return val;
                    }
			    },{
			        title: "操作",
			        field: "empty",
                    formatter: function (value, row, index) {
                        return template("operateHtml",{"row":row});
                    }
			    }]
			});
        });
        
        function edit(id){
        	layer.open({
        	      type: 2,
        	      title: '修改',
        	      shadeClose: true,
        	      shade: false,
                  area: ['80%', '75%'],
        	      content: '${ctx!}/admin/task/form?id=' + id,
        	      end: function(index){
        	    	  $('#table_list').bootstrapTable("refresh");
       	    	  }
        	    });
        }
        function add(){
        	layer.open({
        	      type: 2,
        	      title: '用户添加',
        	      shadeClose: true,
        	      shade: false,
                  area: ['80%', '75%'],
        	      content: '${ctx!}/admin/task/form',
        	      end: function(index){
        	    	  $('#table_list').bootstrapTable("refresh");
       	    	  }
        	    });
        }
        function pauseTaskInfo(jobName,jobGroup){
        	layer.confirm('您确认要暂停该任务吗?', {icon: 3, title:'提示'}, function(index){
        		$.ajax({
    	    		   type: "POST",
    	    		   dataType: "json",
    	    		   url: "${ctx!}/admin/task/pause/" + jobName + "/" + jobGroup + "",
    	    		   success: function(msg){
	 	   	    			layer.msg(msg.msg||"操作成功", {time: 2000},function(){
	 	   	    				$('#table_list').bootstrapTable("refresh");
	 	   	    				layer.close(index);
	 	   					});
    	    		   }
    	    	});
       		});
        }
        function resumeTaskInfo(jobName,jobGroup) {
            layer.confirm('您确认要重新开始该任务吗?', {icon: 3, title:'提示'}, function(index){
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "${ctx!}/admin/task/resume/" + jobName + "/" + jobGroup + "",
                    success: function(msg){
                        layer.msg(msg.msg||"操作成功", {time: 2000},function(){
                            $('#table_list').bootstrapTable("refresh");
                            layer.close(index);
                        });
                    }
                });
            });
        }
        function del(jobName,jobGroup){
            alert(jobName + "//" + jobGroup);
            <#--layer.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index){-->
                <#--$.ajax({-->
                    <#--type: "POST",-->
                    <#--dataType: "json",-->
                    <#--url: "${ctx!}/admin/task/delete/" + jobName + "/" + jobGroup + "",-->
                    <#--success: function(msg){-->
                        <#--layer.msg(msg.msg||"操作成功", {time: 2000},function(){-->
                            <#--$('#table_list').bootstrapTable("refresh");-->
                            <#--layer.close(index);-->
                        <#--});-->
                    <#--}-->
                <#--});-->
            <#--});-->
        }
        
        function detailFormatter(index, row) {
	        var html = [];
	        html.push('<p><b>描述:</b> ' + row.jobDescription + '</p>');
	        return html.join('');
	    }
    </script>

    
    

</body>

</html>
